<!Doctype html>
<html>
<head>
    <meta charset='UTF-8'>
    <title>Document</title>
</head>
<body>

</body>
<script>
// 光标在文档中右击 - 取消右击默认行为，自己创建一个菜单显示
var arr = ['vue','react','nodejs'];
document.oncontextmenu = function(e){
    var e = e || window.event;
    var x = e.clientX;
    var y = e.clientY;
    var ul = document.createElement("ul");
    for(var i=0;i<arr.length;i++){
        var li = document.createElement("li");
        li.innerText = arr[i]
        ul.appendChild(li)
    }
    document.body.appendChild(ul)
    setStyle(ul,{
        width:'100px',
        listStyle:"none",
        padding:0,
        margin:0,
        position:"absolute",
        left:x + 20 + "px",
        top:y + 20 + "px",
        border:"1px solid #666",
        backgroundColor:"#ccc"
    })
    ul.onmouseover = function(e){
        var e = e || window.event;
        var target = e.target || e.srcElement;
        console.log(target);
        // 通过标签名将li和ul区分开，做不同的处理
        // 获取标签名：
        // 1.标签元素.tagName
        // 2.标签元素.nodeName
        // console.log(target.tagName,target.nodeName);
        if(target.tagName === "LI"){
            for(var i=0;i<ul.children.length;i++){
                ul.children[i].style.backgroundColor = 'transparent';
            }
            target.style.backgroundColor = '#0f0';
        }
    }

    ul.onclick = function(){
        var e = e || window.event;
        var target = e.target || e.srcElement;
        if(target.tagName === "LI"){
            alert(target.innerText)
        }
    }
    return false;
}


function setStyle(ele,styleObj){
    for(var attr in styleObj){
        ele.style[attr] = styleObj[attr]
    }
}
</script>
</html>